<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <body>
      <style>
        div {
          position: relative;
          margin: 50px auto;
          width: 100px;
          height: 100px;
          box-sizing: border-box;
          border: 1px solid #333;
          /* // background-color:#333; */
          line-height: 120px;
          text-indent: 5px;
        }

        div::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 50px;
          box-sizing: border-box;
          border-bottom: 1px solid deeppink;
          transform-origin: bottom center;
          transform: rotateZ(45deg) scale(1.414);
          /* // animation:slash 5s infinite ease; */
        }

        @keyframes slash {
          0% {
            transform: rotateZ(0deg) scale(1);
          }
          30% {
            transform: rotateZ(45deg) scale(1);
          }
          60% {
            transform: rotateZ(45deg) scale(1.414);
          }
          100% {
            transform: rotateZ(45deg) scale(1.414);
          }
        }
      </style>
    </body>
  </body>
</html>
